import {QuestionCircleOutlined} from '@ant-design/icons';
import {Button, Divider, Input, message, Popconfirm, Select} from 'antd';
import React, {useState, useRef, useEffect} from 'react';
import {PageContainer} from '@ant-design/pro-layout';
import ProTable from '@ant-design/pro-table';


import {queryRule,getVideoInfo, updateStatus} from './service';


const TableList = (props) => {

  const actionRef = useRef();
  const formRef = useRef();
  const [count, setCount] = useState();
  useEffect(() => {
  }, []);


  const columns = [
    {
      title: '视频ID',
      dataIndex: 'videoId',
    },
    {
      title: '姓名',
      dataIndex: 'memberName',
    },
    {
      title: '卡号',
      dataIndex: 'memberNumber',
    },
    {
      title: '评论内容',
      hideInSearch:true,
      dataIndex: 'comment',
    },
    {
      title: '审核状态',
      dataIndex: 'status',
      valueEnum: {
        0: {
          text: '待审核',
          status: 'Processing',
        },
        1: {
          text: '审核通过',
          status: 'Success',
        },
        2: {
          text: '审核拒绝',
          status: 'Error',
        },
      },
    },
    {
      title: '操作',
      dataIndex: 'option',
      valueType: 'option',
      render: (_, record) => (
        <>
          <a
            onClick={() => {
              getVideoInfo({
                id:record.videoId
              }).then(res=>{
                window.open(res.data.url)
              })
            }}
          >
            查看视频
          </a>
          {
            record.status === 0 ?
              <>
                <Divider type="vertical"/>
                <Popconfirm
                  icon={<QuestionCircleOutlined style={{ color: 'red' }}/>}
                  okText="通过"
                  cancelText="拒绝"
                  title={"确认审核结果"}
                  onConfirm={(e) => {
                    updateStatus({
                      id:record.id,
                      status:1
                    }).then(res=>{
                      actionRef.current.reload();
                    });
                  }}
                  onCancel={(e)=>{
                    updateStatus({
                      id:record.id,
                      status:2
                    }).then(res=>{
                      actionRef.current.reload();
                    });
                  }}
                >
                  <a>审核评论</a>
                </Popconfirm>
              </> : null
          }
        </>
      ),
    },
  ];
  return (
    <PageContainer>
      <ProTable
        headerTitle="评论审核列表"
        actionRef={actionRef}
        rowKey="id"
        search={{
          labelWidth: 120,
        }}
        scroll={{x: 1200}}
        bordered
        request={(params, sorter, filter) => queryRule({...params, sorter, filter})}
        postData={(payload) => {
          const {list, total} = payload;
          setCount(total);
          return list || [];
        }}
        pagination={{
          defaultPageSize: 10,
          showSizeChanger: true,
          showTitle: true,
          total: count,
          showTotal: (total) => `共${total}条`,
        }}
        columns={columns}
      />
    </PageContainer>
  );
};

export default TableList;
